<template>
	<div>
		<!-- 搜索框 -->
		<van-nav-bar title="今日头条" right-text="搜索" left-arrow @click-right="onClickRight" />
		
		<!-- 头部导航栏 -->
		<TabNav @onclick="OnClick" :listItem="listItem" />
		
		<!-- 头部导航栏 -->
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<van-card :desc="item.publishDateStr" :title="item.title" :thumb="item.imageUrls" v-for="(item,index) in listNews"
				 :key="index" @click="OnClicK(item)"/>
			</van-list>
		</van-pull-refresh>
	</div>
</template>
<script>
	import TabNav from "../components/nav";
	export default {
		data() {
			return {
				count: 0,
				loading: false,
				finished: false,
				refreshing: false,
				finished: false,
				listItem: [
					"要闻",
					"推荐",
					"热点",
					"体育",
					"娱乐",
					"足球",
					"星座",
					"国际",
				], 
				listNews: [],
				defaultIndex: 0,
			};
		},
		components: {
			TabNav,
		},
		methods: {
			OnClicK(item) {
				window.location.href = item.url;
			},
			onClickRight() {
				this.$router.push("/search")
			},
			OnClick(index) {
				this.$axios
					.get("http://api.kudesoft.cn/news/list", {
						params: {
							kw: this.listItem[index],
						},
					})
					.then((res) => {
						console.log(this.listItem[index]);
						this.listNews = res.data.result.data;
					})
					.catch((err) => {
						console.log("Catch");
					});
			},
			//下拉刷新事件
			onRefresh() {
				this.$axios
					.get("http://api.kudesoft.cn/news/list", {
						params: {
							kw: this.listItem[this.defaultIndex],
						},
					})
					.then((res) => {
						console.log(this.defaultIndex);
						this.listNews = [];
						this.listNews = res.data.result.data;
						this.refreshing = false;
					});
				this.finished = false;
			},
			onLoad() {
				this.$axios
					.get("http://api.kudesoft.cn/news/list", {
						params: {
							kw: this.listItem[this.defaultIndex],
						},
					})
					.then((res) => {
						this.listNews = [...this.listNews, ...res.data.result.data];
						this.loading = false;
					});
				if (this.listNews.length >= 40) {
					this.finished = true;
				}
			},
		},
		mounted() {
			this.$axios
				.get("http://api.kudesoft.cn/news/list", {
					params: {
						kw: this.listItem[0],
					},
				})
				.then((res) => {
					this.listNews = res.data.result.data;
				})
				.catch((err) => {
					console.log("Catch");
				});
		},
	};
</script>

<style scoped>
	.body_news {
		width: 100%;
		height: 50px;
	}
</style>
